define([
	'jquery',
	'underscore',
	'backbone',
	'collections/ParksCollection',
	'views/ParksListView',
	'views/ParksListItemView',
	'text!../../assets/content/parks.json'], function($, _, Backbone, ParksCollection, ParksListView, ParksListItemView, parksJSON) {

	var ParksListView = Backbone.View.extend({

		tagName: 'ul',

		tagId: 'parks-list',

		className: "list list-all content",

		events: {

		},

		initialize: function() {
			this.getItems();

			App.eventHandler.off('ParksListView:categoryFilter').on('ParksListView:categoryFilter', this.categoryFilter, this);

			App.eventHandler.off('ParksListView:regionFilter').on('ParksListView:regionFilter', this.regionFilter, this);

			App.eventHandler.off('ParksListView:provinceFilter').on('ParksListView:provinceFilter', this.provinceFilter, this);
		},

		render: function() {
			this.$el.attr('id', this.tagId);
			this.$el.addClass('list-all-regions');
			this.$el.addClass('list-all-categories');
			this.$el.addClass('list-all-provinces');
			$(this.options.$parent).html(this.$el);

			App.eventHandler.trigger('ParksListHeaderView:initializeAutocomplete');
		},

		getItems: function() {
			this.parksCollection = new ParksCollection(JSON.parse(parksJSON));
			this.initializeItems();
		},

		initializeItems: function() {
			for (var x = 0, l = this.parksCollection.models.length; x < l; x++) {
				new ParksListItemView({
					model: this.parksCollection.models[x].toJSON(),
					$parent: this.$el
				}).render();
			}
		},

		categoryFilter: function(id) {
			this.$el.removeClass('list-all-categories list-all-regions list-all-province');
			this.$el.removeClass('list-all-categories list-category-1 list-category-2 list-category-3');

			if (id != 0) {
				this.$el.addClass('list-category-' + id);
			} else {
				this.$el.addClass('list-all-categories');
			}
		},

		regionFilter: function(id) {
			this.$el.removeClass('list-all-categories list-all-regions list-all-province');
			this.$el.removeClass('list-all-regions list-region-1 list-region-2 list-region-3 list-region-4');

			if (id != 0) {
				this.$el.addClass('list-region-' + id);
			} else {
				this.$el.addClass('list-all-regions');
			}
		},

		provinceFilter: function(id) {
			this.$el.removeClass('list-all-categories list-all-regions list-all-province');
			this.$el.removeClass('list-province-1 list-province-2 list-province-3 list-province-4 list-province-5 list-province-6 list-province-7 list-province-8 list-province-9 list-province-10 list-province-11 list-province-12 list-province-13 list-province-14 list-province-15 list-province-16 list-province-17 list-province-18 list-province-19 list-province-20 list-province-21 list-province-22 list-province-23 list-province-24');
			if (id != 0) {
				this.$el.addClass('list-province-' + id);
			} else {
				this.$el.addClass('list-all-provinces');
			}
		}
	});

	return ParksListView;
});